<template>
  <div class="diary-container">
    <!-- 左侧导航栏 -->
    <Sidebar />

    <!-- 中间部分：主体内容 -->
    <div class="main-content">
      <!-- 用户信息栏 -->
      <div class="user-info">
        <div class="avatar-container">
          <img src="https://via.placeholder.com/50" alt="头像" class="avatar" />
        </div>
        <div class="user-details">
          <h2 class="username">旅行达人小明</h2>
          <div class="ip-address">IP属地：北京</div>
        </div>
      </div>

      <!-- 导航栏（我的笔记/我的点赞） -->
      <div class="tab-nav">
        <div
          class="tab-item"
          :class="{ active: activeTab === 'notes' }"
          @click="activeTab = 'notes'"
        >
          我的笔记 · 8
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'likes' }"
          @click="activeTab = 'likes'"
        >
          我的点赞 · 3
        </div>
      </div>

      <!-- 内容卡片 -->
      <div class="card-container">
        <div
          v-for="(item, index) in activeTab === 'notes' ? myNotes : myLikes"
          :key="index"
          class="card"
          @click="handleCardClick(item.note_id)"
        >
          <img :src="item.image" alt="图片" class="card-image" />
          <div class="card-content">
            <h3 class="card-title">{{ item.title }}</h3>
            <div class="card-actions">
              <el-button
                  type="primary"
                  :icon="item.isLiked ? StarFilled : Star"
                  @click.stop="toggleLike(item)"
                  >
                   {{ item.likes }} 喜欢
              </el-button>
              <el-button type="success" @click.stop="handleWriteDiary(item)">
                <el-icon><Edit /></el-icon>
                再写一篇
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script setup>
import Sidebar from '@/components/Sidebar.vue' // 引入导航栏组件
import { ref } from 'vue'
import { Location, Notebook, Star, StarFilled, Edit, SwitchButton } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const activeTab = ref('notes') // 当前激活的标签页

// 模拟我的笔记数据
const myNotes = ref([
  {
    note_id: 1,
    note_spot:1, //应该是所属景点的 id
    note_title: '巴黎铁塔下的浪漫之旅',
    note_image: 'https://via.placeholder.com/300',
    note_likes: 128,
    note_isLiked: false // 添加 note_isLiked 属性
  },
  {
    note_id: 2,
    note_spot:1, //应该是所属景点的 id
    note_title: '京都古寺的秋日漫步',
    note_image: 'https://via.placeholder.com/300',
    note_likes: 256,
    note_isLiked: false
  },
  {
    note_id: 3,
    note_spot:1, //应该是所属景点的 id
    note_title: '冰岛极光拍摄全攻略',
    note_image: 'https://via.placeholder.com/300',
    note_likes: 512,
    note_isLiked: false
  }
])

const myLikes = ref([
  {
    note_id: 1,
    note_spot:1, //应该是所属景点的 id
    note_title: '西藏雪山徒步日记',
    note_image: 'https://via.placeholder.com/300',
    note_likes: 1024,
    note_isLiked: true // 添加 note_isLiked 属性
  },
  {
    note_id: 2,
    note_spot:1, //应该是所属景点的 id
    note_title: '土耳其热气球体验',
    note_image: 'https://via.placeholder.com/300',
    note_likes: 2048,
    note_isLiked: true
  }
]);

// 点击卡片处理
const handleCardClick = (id) => {
  console.log('跳转的 ID:', id) // 调试输出
  router.push({
    name:'DiaryDetail',
    params: { id }  // 假设你的数据项中有id字段
  })
}

// 点赞处理函数
const toggleLike = (item) => {
  item.note_isLiked = !item.note_isLiked
  item.note_likes += item.note_isLiked ? 1 : -1
  ElMessage.success(`你${item.note_isLiked ? '点赞' : '取消点赞'}了 "${item.note_title}"`)
  //处理点赞
}

// 写日记处理函数
const handleWriteDiary = (item) => {
  ElMessage.info(`准备为 "${item.note_spot}" 写日记！`)
  router.push({
    path: '/create-diary',
    query: { spot: JSON.stringify({ id: item.note_spot }) } // 传递景点 ID
  })
}

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token')
  ElMessage.success('退出登录成功！')
  router.push('/login')
}
</script>

<style scoped>
.diary-container {
  display: flex; /* 使用 flex 布局 */
  height: 100vh; /* 高度占满整个视口 */
  width: 100%; /* 宽度占满整个视口 */
}

/* 左侧导航栏样式（保持与旅游推荐界面一致） */
.sidebar {
  width: 16%; /* 占据页面 1/6 宽度 */
  background-color: #f5f5f5; /* 背景颜色 */
  padding: 20px; /* 内边距 */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  bottom: 0; /* 底部对齐 */
}

.sidebar-title {
  font-size: 18px; /* 字体大小 */
  margin-bottom: 20px; /* 底部外边距 */
}

.sidebar-menu {
  list-style: none; /* 去掉列表样式 */
  padding: 0; /* 去掉内边距 */
}

.sidebar-menu li {
  margin-bottom: 10px; /* 底部外边距 */
}

.sidebar-link {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  text-decoration: none; /* 去掉下划线 */
  color: #2c3e50; /* 字体颜色 */
  padding: 10px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
}

.sidebar-link:hover {
  background-color: #e0e0e0; /* 鼠标悬停时的背景色 */
}

.sidebar-link .el-icon {
  margin-right: 10px; /* 右侧外边距 */
}

.logout-button {
  width: 100%; /* 宽度占满父容器 */
  margin-top: 20px; /* 顶部外边距 */
  background-color: #ff4d4f; /* 背景颜色 */
  border: none; /* 去掉边框 */
  color: white; /* 字体颜色 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.logout-button:hover {
  background-color: #ff7875; /* 鼠标悬停时的背景色 */
}

/* 中间主体内容 */

.main-content {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    margin-left: 17%; /* 避免内容被导航栏遮挡 */
    display: flex;
    flex-direction: column; /* 改为列布局 */
    align-items: center; /* 水平居中 */
    width: calc(100% - 16.666%); /* 确保内容宽度占满剩余空间 */
  }
/* 用户信息栏 */
.user-info {
  width: 100%; /* 宽度占父容器 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px; /* 底部外边距 */
  padding: 15px; /* 内边距 */
  background-color: #fff; /* 背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
.avatar-container {
  width: 65px; /* 固定宽度 */
  height: 65px; /* 固定高度 */
  margin-right: 15px; /* 右侧外边距 */
}
.avatar {
  width: 100%; /* 宽度占满父容器 */
  height: 100%; /* 高度占满父容器 */
  border-radius: 50%; /* 圆形 */
  object-fit: cover; /* 图片适应容器 */
}
.user-details {
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
}
.username {
  margin-left: 20px;
  font-size: 18px; /* 字体大小 */
  margin-bottom: 5px; /* 底部外边距 */
}
.ip-address {
  color: #666; /* 字体颜色 */
  font-size: 14px; /* 字体大小 */
  margin-bottom: 15px;
}

/* 导航栏切换 */
.tab-nav {
  display: flex; /* 使用 flex 布局 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
  margin-bottom: 20px; /* 底部外边距 */
}
.tab-item {
  padding: 10px 20px; /* 内边距 */
  cursor: pointer; /* 鼠标指针 */
  font-size: 16px; /* 字体大小 */
  color: #666; /* 字体颜色 */
  transition: color 0.3s; /* 颜色过渡效果 */
}
.tab-item.active {
  color: #ff4d4f; /* 激活状态的字体颜色 */
  border-bottom: 2px solid #ff4d4f; /* 激活状态的底部边框 */
}

/* 公共卡片样式 */
 
.card-container {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(2,1fr); /* 每列最小宽度250px，自动填充 */
  gap: 20px; /* 卡片之间的间距 */
  width: 100%; /* 确保容器宽度占满父容器 */
  padding: 20px; /* 增加容器内边距 */
  justify-items: stretch; /* 卡片宽度拉伸以填满列 */
  align-items: start; /* 卡片顶部对齐 */
  box-sizing: border-box; /* 包括内边距和边框 */
  margin-right: 20px;
  margin-left: 10px;
}
  
  .card {
    flex: 1 1 calc(33.333% - 20px); /* 每行最多 3 张卡片，间距为 20px */
    max-width: calc(40% - 20px); /* 每张卡片的最大宽度 */
    min-width: 200px; /* 设置卡片的最小宽度，防止内容溢出 */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 20px; /* 增加内边距 */
  }
  
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .card-image {
    width: 100%;
    height: 200px; /* 增加图片高度 */
    object-fit: cover;
    border-radius: 8px; /* 图片圆角 */
  }
  
  .card-content {
    padding: 0px;
  }
  
  .card-title {
    font-size: 20px; /* 增加标题字体大小 */
    margin-bottom: 10px;
  }
  
  .card-actions {
  display: flex;
  justify-content: space-between; /* 按钮两端对齐 */
  margin-top: 10px; /* 按钮与内容的间距 */
}

/* 公共按钮样式 */
.card-actions .el-button {
  flex: 1; /* 按钮宽度均分 */
  margin: 0 5px; /* 按钮之间的间距 */
  font-size: 14px; /* 按钮字体大小 */
  padding: 8px 12px; /* 按钮内边距 */
  border-radius: 6px; /* 按钮圆角 */
}

/* 喜欢按钮样式 */
.card-actions .el-button[type="primary"] {
  background-color: #ff4d4f; /* 喜欢按钮背景色 */
  color: white; /* 字体颜色 */
  border: none; /* 去掉边框 */
}

.card-actions .el-button[type="primary"]:hover {
  background-color: #ff7875; /* 鼠标悬停时的背景色 */
}

/* 写日记按钮样式 */
.card-actions .el-button[type="success"] {
  background-color: #52c41a; /* 写日记按钮背景色 */
  color: white; /* 字体颜色 */
  border: none; /* 去掉边框 */
}

.card-actions .el-button[type="success"]:hover {
  background-color: #73d13d; /* 鼠标悬停时的背景色 */
}


</style>